<template>
  <div
    v-if="isShow"
    class="hello"
    :style="isAnimation ? 'background-color: rgba(0,0,0,0.2)' : ''"
    @click.stop="clickMask(data)"
  >
    <div
      ref="box"
      class="box"
      :class="isAnimation ? (color=='blue'?'blue-bgc':'red-bgc') : ''"
      :style="{'position': 'absolute', 'left': data.position[0] + 'px', 'top': data.position[1] + 'px'}"
      @click.stop
    >
      <div class="content" :class="isAnimation ? (color=='blue'?'blue-border':'red-border') : ''">
        <div class="title" :class="color=='blue'?'blue-title':'red-title'">
          {{ title }}
        </div>
        <div class="from">
          <div v-for="(item, index) in data.list" :key="index" class="list">
            <div class="left">{{ item.title }}</div>
            <div class="right">{{ item.content }}</div>
          </div>
          <div class="img-box">
            <ImgWithBorder :img-list="[data]" />
            <!-- <img class="img" :src="cfg.imageDomain + data.img" @click="clickImg(data.img)"> -->
          </div>
          <div class="btn-box">
            <div v-if="data.type == 4" class="btn btn-red" @click.stop="clickFalseAlarm(data)">误报</div>
            <div v-if="data.type == 2" class="btn btn-red" @click.stop="clickApproval(data)">审批</div>
            <div v-if="data.type == 3" class="btn btn-red" @click.stop="clickManagement(data)">去处置</div>
            <div class="btn" :class="color=='blue'?'blue-btn':'red-btn'" @click.stop="clickConfirm(data)">确认</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImgWithBorder from './components/ImgWithBorder/ImgWithBorder.vue'
export default {
  components: { ImgWithBorder },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    color: {
      type: String,
      default: 'blue'
    },
    isAnimation: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    /* console.log(`弹框---高：${this.$refs.box.offsetHeight}宽：${this.$refs.box.offsetWidth}`)
      console.log(`屏幕---高：${this.client().height},宽：${this.client().width}`)
      console.log(this.client().height - (this.$refs.box.offsetHeight + this.$refs.box.offsetTop))
      console.log(this.client().width - (this.$refs.box.offsetWidth + this.$refs.box.offsetLeft)) */
    const bottom = this.client().height - (this.$refs.box.offsetHeight + this.$refs.box.offsetTop)
    const right = this.client().width - (this.$refs.box.offsetWidth + this.$refs.box.offsetLeft)
    if (bottom < 10 || right < 10) {
      this.changePosition()
    }
  },
  methods: {
    /**
       * 点击误报
       */
    clickFalseAlarm(e) {
      this.$emit('clickFalseAlarm', e)
    },
    /**
       * 点击确认
       */
    clickConfirm(e) {
      this.$emit('clickConfirm', e)
    },
    /**
       * 审批
       */
    clickApproval(e) {
      this.$emit('clickApproval', e)
    },
    /**
       * 去处置
       */
    clickManagement(e) {
      this.$emit('clickManagement', e)
    },
    /**
       * 点击图片
       */
    clickImg(e) {
      window.open(e)
    },
    /**
       * 点击蒙版
       */
    clickMask(e) {
      this.$emit('clickMask', e)
    },
    /**
       * 弹框超出屏幕时触发
       */
    changePosition() {
      this.$emit('changePosition')
    },

    client() {
      if (window.innerWidth) {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        }
      } else if (document.compatMode === 'CSS1Compat') {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        }
      }
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .hello {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    overflow: hidden;

    /* display: flex;
    justify-content: center;
    align-items: center; */
    .box {
      width: 520px;
      padding: 20px;
      border-radius: 8px;

      .content {
        border-radius: 4px;

        .title {
          width: 100%;
          height: 72px;
          font-size: 24px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 72px;
          letter-spacing: 2px;
          text-shadow: 0px 1px 2px rgba(0, 24, 72, 0.4);
          text-align: center;
        }

        .from {
          padding: 20px 48px;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(3px);

          .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;

            .left {
              font-size: 16px;
              font-family: Microsoft YaHei-Light, Microsoft YaHei;
              font-weight: 300;
              color: #FFFFFF;
              text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
              flex-shrink: 0;
            }

            .right {
              font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
            }
          }

          .list+.list {
            border-top: 1px solid #fff;
          }

          .img-box {
            width: 100%;
            height: 182px;
            margin: 20px 0;

            .img {
              width: 100%;
              height: 100%;
              vertical-align: bottom;
              object-fit: cover;
            }
          }

          .btn-box {
            display: flex;
            justify-content: flex-end;

            .btn {
              width: 140px;
              height: 48px;
              border-radius: 4px;
              font-size: 18px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 48px;
              text-align: center;
              letter-spacing: 4px;
              cursor: pointer;
            }

            .btn-red {
              color: #FF0000;
              background-color: #fff;
            }

            .btn+.btn {
              margin-left: 40px;
            }
          }
        }
      }
    }
  }

  .blue-title {
    background: url('../../assets/bulletFrame_img/blue-title.png') no-repeat;
    background-size: 102% 100%;
  }

  .red-title {
    background: url('../../assets/bulletFrame_img/red-title.png') no-repeat;
    background-size: 102% 100%;
  }

  .blue-btn {
    background: #0099FF;
  }

  .red-btn {
    background: #FF0000;
  }

  .blue-bgc {
    animation: bgc-blue 4s infinite alternate;
  }

  .blue-border {
    animation: border-blue 4s infinite alternate;
  }

  .red-bgc {
    animation: bgc-red 4s infinite alternate;
  }

  .red-border {
    animation: border-red 4s infinite alternate;
  }

  @keyframes bgc-blue {
    0% {
      background: rgba(0, 153, 255, 0);
    }

    13% {
      background: rgba(0, 153, 255, 0);
    }

    50% {
      background: rgba(0, 153, 255, 0.2);
    }

    87% {
      background: rgba(0, 153, 255, 0);
    }

    100% {
      background: rgba(0, 153, 255, 0);
    }
  }

  @keyframes border-blue {
    0% {
      border: 10px solid rgba(0, 51, 171, 0.2);
    }

    25% {
      border: 10px solid rgba(0, 51, 171, 0.4);
    }

    75% {
      border: 10px solid rgba(0, 51, 171, 0.4);
    }

    100% {
      border: 10px solid rgba(0, 51, 171, 0.2);
    }
  }

  @keyframes bgc-red {
    0% {
      background: rgba(255, 0, 0, 0);
    }

    13% {
      background: rgba(255, 0, 0, 0);
    }

    50% {
      background: rgba(255, 0, 0, 0.2);
    }

    87% {
      background: rgba(255, 0, 0, 0);
    }

    100% {
      background: rgba(255, 0, 0, 0);
    }
  }

  @keyframes border-red {
    0% {
      border: 10px solid rgba(238, 0, 0, 0.2);
    }

    25% {
      border: 10px solid rgba(238, 0, 0, 0.4);
    }

    75% {
      border: 10px solid rgba(238, 0, 0, 0.4);
    }

    100% {
      border: 10px solid rgba(238, 0, 0, 0.2);
    }
  }
</style>
